<template>
  <div class="local-date">
      <!-- 使用 ref attribute 为子组件或 HTML 元素指定 引用ID -->
      <span ref="year">{{year}}</span>
      <span ref="month">{{month}}</span>
      <span ref="date">{{date}}</span>
      <button @click="setYearStyle">设置年份样式</button>
  </div>
</template>

<script>
export default {
    name: 'LocalDate' ,
    data(){
        return {
            year: '2021年' ,
            month: '12月' ,
            date: '22日'
        }
    },
    methods: {
        setYearStyle(){
            // 获得本组件中所有指定过 ref attribute 的元素
            let refs = this.$refs ;
            console.log( refs );
            // 根据 引用ID ( reference ID ) 获取元素或组件
            let yearSpan = refs.year ;
            console.log( yearSpan );
            // 通过原生JavaScript为HTML元素设置样式
            yearSpan.style.border = '1px solid blue' ;
        },
        setMonthStyle(){
            this.$refs.month.style.background = '#dfdfdf' ;
        }
    }
}
</script>

<style>
.local-date {
    display: flex ;
    justify-content: flex-start ;
}

.local-date>span {
    line-height: 30px ;
    margin-right: 10px ;
}
</style>